<template>
    <div class="content">
        <div class="tabs">
            <div v-for="(item, index) in tabsQueryOptions" :key="index" class="statusItem"
                 :class="{active: item.isSelect}" @click="handleStatus(index)">
                <div>{{item.name}}</div>
            </div>
        </div>
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            class="orderList">
            <div v-for="(item, index) in dataList" :key="index" class="orderItemWrap">
                <div class="control" v-if="item.status > '3'">
                    <van-icon name="close" size="10" @click="deleteOrder(item,index)"/>
                </div>
                <div class="orderInfo">
                    <div class="imgWrap">
                        <img :src="item.productPicture" class="productImg"/>
                    </div>
                    <div class="name">
                        {{item.productName}}
                    </div>
                    <div class="price">
                        <div>￥{{item.totalPrice}}</div>
                        <div>
                            x{{item.productNum}}
                        </div>
                    </div>
                </div>
                <div class="statusWrap">
                    <div class="productStatus">
                        {{ orderStatusFmt(item.status)}}
                    </div>
                    <div>
                        共{{item.productNum}}件商品 合计:￥{{item.totalPrice}}
                    </div>
                </div>
                <div class="orderBtnWrap">
                    <div v-if="item.btnVisible.scanCode" class="orderBtnItem scanCode" @click="handleScanCode(item)">
                        扫码核销
                    </div>
                    <div v-if="item.btnVisible.reminder" class="orderBtnItem reminder red"
                         @click="handleReminder(item)">催发货
                    </div>
                    <div v-if="item.btnVisible.exchange" class="orderBtnItem exchange red"
                         @click="handleExchange(item)">兑换礼包
                    </div>
                    <div v-if="item.btnVisible.receiver" class="orderBtnItem receiver red"
                         @click="handleReceiver(item)">确认收货
                    </div>
                    <!--                    <div class="orderBtnItem share">分享给好友</div>-->
                </div>
            </div>
        </van-list>
        <van-popup v-model="showQrcode" class="qrcodePopup">
            <div class="title">{{qrcodeInfo.title}}</div>
            <qrcode-vue :value="qrcodeInfo.text" :size="qrcodeInfo.size" level="H" class="qr"/>
        </van-popup>
    </div>
</template>

<script>
    //import QrcodeVue from 'qrcode.vue'
    const tabsQueryOptions = [
        {
            value: "0",
            name: "全部",
            isSelect: true
        },
        {
            value: "1",
            name: "待使用",
            isSelect: false
        },
        {
            value: "2",
            name: "待发货",
            isSelect: false
        },
        {
            value: "3",
            name: "待收货",
            isSelect: false
        },
        {
            value: "4",
            name: "已完成",
            isSelect: false
        }
    ];
    //状态:0未付款 1已付款未发货 2取消订单,3，已发货，4，确认收货，5，待退款，6已退款，7已申请退货，8已退货，9待退货
    const orderStatus = [
        {value: "0", name: "未付款"},
        {value: "1", name: "待发货"},
        {value: "2", name: "已取消"},
        {value: "3", name: "买家已发货"},
        {value: "4", name: "已确认收货"},
        {value: "5", name: "待退款"},
        {value: "6", name: "已退款"},
        {value: "7", name: "退货申请中"},
        {value: "8", name: "已退货"},
        {value: "9", name: "待退货"},
    ];
    //功能按钮
    const btnVisible = {
        scanCode: false,//扫码核销
        reminder: false,//催发货
        exchange: false,//兑换礼包
        receiver: false,//确认收货
        share: false,//分享给好友
    };
    export default {
        name: "OrderList",
        components: {
           // QrcodeVue,
        },
        data() {
            return {
                imgSrc: [
                    require("@img/img-error.png"),
                ],
                loading:false,
                finished:false,
                // page: this.$global.page,
                // pages: this.$global.pages,
                size: this.$global.size,
                // size:5,
                page: 0,
                pages: 1,
                total: 1,
                dataList: [],
                search: {
                    isExchangeUsed: "",//礼包兑换券是否已经使用 0=否 1=是
                    status: "",
                },
                tabsQueryOptions: tabsQueryOptions,
                orderStatus: orderStatus,
                btnVisible: btnVisible,
                tabsIdx: -1,
                showQrcode:false,
                qrcodeInfo:{
                    title : "",
                    text : "",
                    size: 200,
                }
            }
        },

        created() {
            // this.handleStatus(0);
        },
        methods: {
            //tabs 状态切换
            handleStatus(index) {
                if(index !== this.tabsIdx){
                    this.dataList = [];
                    this.page = 1;
                    this.pages = 2;
                    this.finished = false;
                }else{
                    return false;
                }
                this.tabsIdx = index;
                for (let i = 0; i < this.tabsQueryOptions.length; i++) {
                    this.tabsQueryOptions[i].isSelect = (index == i)
                }
                switch (index) {
                    case 0:
                        this.search.status = "";
                        this.search.isExchangeUsed = "";
                        break;
                    case 1:
                        this.search.status = "";
                        this.search.isExchangeUsed = "0";
                        break;
                    case 2:
                        this.search.status = "1";
                        this.search.isExchangeUsed = "";
                        break;
                    case 3:
                        this.search.status = "3";
                        this.search.isExchangeUsed = "";
                        break;
                    case 4:
                        this.search.status = "4";
                        this.search.isExchangeUsed = "";
                        break;
                }
                this.getProductOrderList()
            },
            //获取礼包列表
            getProductOrderList() {
                //状态:0未付款 1已付款未发货 3，已发货，4，确认收货
                this.$api.getProductOrderList({
                    page: this.page,
                    size: this.size,
                    isExchangeUsed: this.search.isExchangeUsed,//礼包兑换券是否已经使用 0=否 1=是
                    status: this.search.status,
                }).then(res => {
                    this.page = res.data.data.pageNum;
                    this.pages = res.data.data.pages;
                    let temp = res.data.data.list.map(item => {
                        this.btnStatusFmt(item);
                        return item
                    })
                    this.dataList.push(...temp);
                    this.loading = false;
                })
            },
            onLoad() {
                if (this.page >= this.pages) {
                    this.finished = true
                } else {
                    this.page++;
                    this.getProductOrderList();
                }
            },
            //订单状态翻译
            orderStatusFmt(status) {
                return this.$util.dictTranslate(orderStatus, status)
            },
            //功能按钮状态
            btnStatusFmt(row) {
                //除了全部选项，其他tabs 先写固定，后续再仔细考虑
                row.btnVisible = {
                    scanCode: false,//扫码核销
                    reminder: false,//催发货
                    exchange: false,//兑换礼包
                    receiver: false,//确认收货
                    share: false,//分享给好友
                };
                switch (this.tabsIdx) {
                    case 1:
                        row.btnVisible.exchange = true;//兑换礼包
                        break;
                    case 2:
                        row.btnVisible.scanCode = true;//扫码核销
                        row.btnVisible.reminder = true;//催发货
                        break;
                    case 3:
                        row.btnVisible.scanCode = true;//扫码核销
                        row.btnVisible.receiver = true;//确认收货
                        break;
                    case 4:
                        if (row.isExchange == '1' && row.isExchangeUsed == '0') {
                            row.btnVisible.exchange = true
                        }
                        break;
                    default:
                        if (row.status == '1') {
                            row.btnVisible.reminder = true;//催发货
                        }
                        if (row.status == '3') {
                            row.btnVisible.receiver = true;//确认收货
                        }
                        if (row.isExchange == '1' && row.isExchangeUsed == '0') {
                            row.btnVisible.exchange = true
                        }
                        if (row.isExchange == '0' && (row.status == '1' || row.status == '3')) {
                            row.btnVisible.scanCode = true;//扫码核销
                        }
                }
            },
            //扫码核销
            handleScanCode(row) {
                this.qrcodeInfo.title = row.productName;
                this.qrcodeInfo.text = row.exchangeCode;
                this.showQrcode = true;
                // this.getProductOrderList()
            },
            //催发货
            handleReminder() {
                let self = this;
                if (timer) {
                    clearTimeout(timer);
                    timer = null
                }
                let timer = setTimeout(function () {
                    self.$toast.success(
                        '催发货成功'
                    );
                }, 1000);
            },
            //兑换礼包
            handleExchange() {
                this.$router.push({
                    path: "/product/index"
                });
            },
            //确认收货
            productOrderReceiver(row) {
                this.$api.productOrderReceiver(row.productOrderId).then(res => {
                    if(res.data.code===""){
                        this.$toast({
                            title: '确认收货成功',
                        });
                        this.getProductOrderList();
                    }
                })
            },
            deleteOrder(item){
                this.$api.orderDelete(item.productId).then((res)=>{
                    if(res.data.code === "00"){
                        this.$toast.success("删除成功");
                        let temp = this.dataList.filter((i)=>{
                            return i.productId != item.productId;
                        })
                        this.dataList = temp;
                    }else{
                        this.$toast.fail(res.data.msg);
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        .tabs {
            width: 100vw;
            position: fixed;
            margin-top: -2px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: #FFFFFF;
            font-size: 14px;
            line-height: 50px;
            z-index: 500;

            .statusItem {
                padding: 0 5px;
            }

            .statusItem.active {
                border-bottom: 2px solid #D82D11;
            }
        }

        .orderList {
            padding-top: 60px;
            .control{
                position: relative;
                height: 15px;
                .van-icon{
                    position: absolute;
                    right: -15px;
                    top: -14px;
                    background: #D82D11;
                    padding: 3px;
                    color: #ffffff;
                }
            }
            .orderItemWrap {
                background: #ffffff;
                padding: 15px;
                margin-bottom: 15px;
                box-shadow: 1px 1px 3px 1px #f9eeee;

                .orderInfo {
                    display: flex;
                    .imgWrap{
                        background: #e2e2e2;
                        border: 1px solid #F5F5F5;
                        border-radius: 4px;
                        .productImg {
                            width: 88px;
                            height: 88px;
                            border-radius: 4px;
                            display: block;
                        }
                    }



                    .name {
                        flex: 1;
                        padding-left: 6px;
                        font-size: 14px;
                        line-height: 22px;
                        font-weight: 600;
                        display: -webkit-box;
                        -webkit-line-clamp: 4;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                    }

                    .price {
                        text-align: right;
                        flex: 0 0 80px;
                    }
                }

                .statusWrap {
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid #EDEDED;
                    padding: 10px 0;
                    margin-bottom: 10px;
                    line-height: 1;
                    .productStatus {
                        color: #D82D11
                    }
                }

                .orderBtnWrap {
                    display: flex;
                    justify-content: flex-end;
                    flex-wrap: wrap;
                    .orderBtnItem {
                        padding: 4px;
                        border: 1px solid #4D4D4D;
                        color: #4D4D4D;
                        font-size: 12px;
                        background: #ffffff;
                        border-radius: 4px;
                        margin-left: 10px;
                        line-height: 1;
                    }

                    .orderBtnItem.red {
                        border: 1px solid #D82D11;
                        color: #D82D11;
                    }
                }
            }
        }

        .codeText {
            font-size: 15px;
            margin-top: 10px;
        }
        .qrcodePopup{
            padding:8px;
            .title {
                text-align: center;
                margin-bottom: 15px;
            }
            .qr{
                padding:10px;
            }
        }
    }
</style>
